<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}
        .box{
            width: 200px;
            height: 200px;
            /* 相对定位 
                1.相对定位开启以后元素不会脱离文档流
                2.相对定位同样支持坐标系布局-相对定位的参照物是自身
                3.相对定位不会影响文档流的状态，它所有的位置偏移都不会影响文档流的位置，可以理解为视觉效果的
                变化
                4.相对定位也会提升元素的层级
                5.相对定位大多数情况都是给绝对定位做参照物
            */
            position: relative;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>